<template>
  <div class="project-container">
    <div class="head">
      <div class="top">
        <el-form ref="form" :inline="true" :model="form" label-width="100px">
          <el-form-item label="账单发送日期:">
            <el-date-picker v-model="form.date" type="date" placeholder="年/月/日"></el-date-picker>
            <span class="dash">~</span>
            <el-date-picker v-model="form.finaldate" type="date" placeholder="年/月/日"></el-date-picker>
          </el-form-item>
          <el-form-item label="批次名称:">
            <el-input type="text" v-model="form.batch" placeholder></el-input>
            <el-button type="success">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot">
        <el-button type="primary" @click="getNew">新建</el-button>
      </div>
    </div>
    <div class="main">
      <div class="body">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#f5f4f4',color:'#606266'}"
        >
          <el-table-column prop="batchname" label="批次名称" width="280"></el-table-column>
          <el-table-column prop="time" label="账单发送时间" width="260"></el-table-column>
          <el-table-column prop="finaltime" label="收费截止时间" width="260"></el-table-column>
          <el-table-column prop="total" label="账单总数" width="200"></el-table-column>
          <el-table-column prop="paid" label="已缴费" width="170"></el-table-column>
          <el-table-column prop="unpaid" label="未缴费" width="175"></el-table-column>
          <el-table-column label="操作" width="320">
            <template slot-scope="scope">
              <el-button size="small" @click="getDetails">查看</el-button>
              <el-button size="small" style="color:#0490f7">下载</el-button>
              <el-button size="small" style="color:#0490f7">下载通知单</el-button>
              <el-button size="small" style="color:#ff0000">延期</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="prev, pager, next, sizes, jumper"
            :total="100"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="新建批次"
      :visible.sync="show"
      width="70%"
      class="batch"
      :before-close="handleClose">
      <el-form ref="form" :model="forms" label-width="100px">
        <div class="main-top">
          <el-form-item label="批次名称:">
            <el-input v-model="forms.batchname" placeholder="请填写批次名称"></el-input>
          </el-form-item>
          <el-form-item label="收费截止时间:">
            <el-date-picker v-model="forms.finaltime" type="date" placeholder="年/月/日"></el-date-picker>
          </el-form-item>
        </div>
        <div class="main-body">
          <div class="main-left">
            <el-form-item label="缴费账单名称:">
              <el-input v-model="forms.billname" placeholder="请填写缴费账单名称"></el-input>
            </el-form-item>
            <el-form-item label="班级:">
              <el-select v-model="forms.class" placeholder="请选择班级">
                <el-option label="一年级一班" value="class1"></el-option>
                <el-option label="二年级二班" value="class2"></el-option>
                <el-option label="三年级三班" value="class3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学生:">
              <el-select v-model="forms.student" placeholder="请选择学生">
                <el-option label="张小三" value="zhangxiaosan"></el-option>
                <el-option label="赵小四" value="zhaoxiaosi"></el-option>
                <el-option label="王小五" value="wangxiaowu"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="家长手机:">
              <el-input v-model="forms.mobile" placeholder="请填写家长手机号"></el-input>
            </el-form-item>
          </div>
          <div class="main-right">
            <el-form-item label="缴费项:">
              <div class="item">
                <el-input type="text" v-model="forms.contribution1" placeholder="缴费项名称"></el-input>
                <el-input type="text" v-model="forms.contributionvalue1" placeholder></el-input>
                <el-button>删除</el-button>
                <el-button>新增缴费项</el-button>
              </div>
              <div class="item">
                <el-input type="text" v-model="forms.contribution2" placeholder="缴费项名称"></el-input>
                <el-input type="text" v-model="forms.contributionvalue2" placeholder></el-input>
                <el-button>删除</el-button>
              </div>
              <div class="item">
                <el-input type="text" v-model="forms.contribution3" placeholder="缴费项名称"></el-input>
                <el-input type="text" v-model="forms.contributionvalue3" placeholder></el-input>
                <el-button>删除</el-button>
              </div>
              <div class="item">
                <el-input type="text" v-model="forms.contribution4" placeholder="缴费项名称"></el-input>
                <el-input type="text" v-model="forms.contributionvalue4" placeholder></el-input>
                <el-button>删除</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="main-btn">
        <el-button>添加账单</el-button>
      </div>
      <el-table :data="billData" border style="width: 90%">
        <el-table-column prop="billname" label="缴费账单名称" width="160"></el-table-column>
        <el-table-column prop="class" label="班级" width="150"></el-table-column>
        <el-table-column prop="student" label="学生" width="130"></el-table-column>
        <el-table-column prop="mobile" label="家长手机" width="150"></el-table-column>
        <el-table-column prop="contribution1" label="缴费项1" width="120"></el-table-column>
        <el-table-column prop="contribution2" label="缴费项2" width="113"></el-table-column>
        <el-table-column prop="contribution3" label="缴费项3" width="115"></el-table-column>
        <el-table-column prop="contribution4" label="缴费项4" width="115"></el-table-column>
        <el-table-column prop="operation" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="2019春季费用"
      :visible.sync="details"
      width="70%"
      class="see"
      :before-close="handleClose">
      <el-table :data="billdetails" border style="width: 91%">
        <el-table-column prop="billname" label="缴费账单名称" width="180"></el-table-column>
        <el-table-column prop="class" label="班级" width="140"></el-table-column>
        <el-table-column prop="student" label="学生" width="140"></el-table-column>
        <el-table-column prop="mobile" label="家长手机" width="150"></el-table-column>
        <el-table-column prop="finaldate" label="缴费截止日期" width="122"></el-table-column>
        <el-table-column prop="contribution1" label="缴费项1" width="115"></el-table-column>
        <el-table-column prop="contribution2" label="缴费项2" width="115"></el-table-column>
        <el-table-column prop="contribution3" label="缴费项3" width="112"></el-table-column>
        <el-table-column prop="contribution4" label="缴费项4" width="110"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetails">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetBatchdata, GetBilldata, GetRecorddata } from "@/api/detail";
export default {
  name: "Project",
  data() {
    return {
      value1: "",
      value2: "",
      name: "",
      currentPage: 1,
      show: false,
      details:false,
      tableData: [],
      billData: [],
      billdetails: [],
      form: {
        date: "",
        finaldate: "",
        batch: ""
      },
      forms: {
        batchname: "",
        finaltime: "",
        class: "",
        student: "",
        billname: "",
        mobile: "",
        contribution1: "",
        contribution2: "",
        contribution3: "",
        contribution4: "",
        contributionvalue1: "",
        contributionvalue2: "",
        contributionvalue3: "",
        contributionvalue4: ""
      }
    };
  },
  components: {},
  mounted() {
    this.init();
    this.bill();
    this.detail();
  },
  methods: {
    init() {
      GetBatchdata().then( res => {
        if(res.code === 200) {
          this.tableData = res.data;
        }
      })
    },
    bill() {
      GetBilldata().then( res => {
        if(res.code === 200) {
          this.billData = res.data;
        }
      })
    },
    detail() {
      GetRecorddata().then( res => {
        if(res.code === 200) {
          this.billdetails = res.data;
        }
      })
    },
    getNew() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    getDetails() {
      this.details = true;
    },
    closeDetails() {
      this.details = false;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.project-container {
  width: 98%;
  height: 865px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
  position: relative;
}
.head {
  width: 100%;
  height: 130px;
  .top {
    width: 94%;
    height: 50px;
    margin: 0 auto;
    padding-top: 20px;
    /deep/ .el-form-item__label {
      width: 101px !important;
    }
    /deep/ .el-input {
      width: auto;
    }
    /deep/ .el-button {
      margin-left: 20px;
    }
  }
  .foot {
    margin-left: 55px;
    margin-top: 25px;
  }
}
.main {
  width: 100%;
  height: 600px;
  .body {
    width: 100%;
    height: auto;
    /deep/ .cell {
      text-align: center;
    }
    /deep/ .el-button{
      border: none;
      color: #00f;
      padding: 0;
    }
    .block {
      float: right;
      margin-top: 20px;
      margin-right: 20px;
      /deep/ .el-pagination button {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
      }
      /deep/ .el-pager li {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 10px;
      }
      /deep/ .el-pager li.active {
        background: #409eff;
        color: #fff;
        border: none;
      }
    }
  }
}
.batch {
  /deep/ .el-dialog {
    .main-top {
      height: 60px;
      border-bottom: 1px solid #ccc;
      .el-form-item {
        display: inline-block;
        margin-right: 20px;
        .el-input {
          top: -40px;
        }
      }
      .el-form-item__label {
        width: 101px !important;
      }
    }
    .main-body {
      margin-top: 20px;
      .main-left {
        width: 25%;
        float: left;
        margin-right: 3%;
        .el-form-item__label {
          width: 120px !important;
        }
        .el-form-item__content {
          margin-left: 120px !important;
          .el-input {
            width: 100%;
          }
        }
      }
      .main-right {
        width: 50%;
        float: left;
        .item {
          width: 100%;
          height: 40px;
          margin-bottom: 10px;
          .el-input {
            width: 30%;
            margin-right: 5px;
          }
        }
      }
    }
    .main-btn {
      width: 100%;
      margin-top: 270px;
      margin-left: 30px;
    }
    .el-table {
      margin: 0 auto;
      margin-top: 30px;
      .cell {
        text-align: center;
      }
      .el-button{
        border: none;
        color: #00f;
        padding: 0;
      }
    }
  }
}
.see {
  /deep/ .el-dialog {
    /deep/ .el-table .cell{
      text-align: center;
    }
    /deep/ .el-table{
      color: #000;
      margin: 0 auto;
    }
    /deep/ .el-table--border{
      border: 1px solid #000;
    }
    /deep/ .el-table--border td{
      border-right: 1px solid #000;
    }
    /deep/ .el-table--border th{
      border-right: 1px solid #000;
    }
    /deep/ .el-table td{
      border-bottom: 1px solid #000;
    }
    /deep/ .el-table th.is-leaf{
      border-bottom: 1px solid #000;
    }
  }
}
</style>
